<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css"
	href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Travel Insurance :: Sara Benito</title>
<style type="text/css">
body {
	font-style: normal;
	font-family: arial, helvetica, sans-serif;
	font-size: 77%;
	margin: 20px;
	text-align: left;
}

.mainContainer {
	height: 392px;
	width: 422px;
	border-color: #FF6600;
	border-style: solid;
	border-radius: 9px;
	position: relative;
}

.newColorContainer {
	width: 300px;
	border-style: solid;
	border-radius: 9px;
	position: relative;
	border-color: #88a;
}

.screen {
	padding: 10px;
	margin: auto;
	width: 240px;
	height: 172px;
	overflow: hidden;
	position: relative;
}

.registerContainer {
	border-radius: 4px;
	border: 1px solid #88a;
	height: 200px;
	width: 290px;
	padding: 5px;
}

.taskbar {
	width: 230px;
	height: 30px;
	bottom: 0;
	left: 0;
	padding: 4px;
	line-height: 20px;
}

label {
	position: relative;
	font-weight: bold;
	width: 120px;
}

.text-input {
	position: relative;
	width: 120px;
}

#submitRegistration {
	float: right;
	cursor: pointer;
}

.header {
	height: 50px;
	background-color: #FF6622;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	color: white;
	padding-top: 10px;
}

.headerRegistration {
	height: 50px;
	background-color: #88a;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	overflow: hidden;
	color: white;
	padding-top: 10px;
}

.headerInsured {
	background-color: highlight;
	height: 20px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}

.content {
	height: 130px;
	width: 375px;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	padding: 10px;
	border: 1px solid #88a;
	border-radius: 7px;
	margin: 10px;
}

.tightContent {
	height: 90px;
	width: 380px;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	padding: 5px;
	border: 1px solid #88a;
	border-radius: 7px;
	margin: 5px;
	margin-left: 15px;
}

.paragraphContent {
	font-weight: normal;
	font-size: 12px;
	margin: 10px;
}

#planFrame {
	background-color: #FF6622;
	padding-top: 9px;
	text-align: center;
	color: white;
	position: relative;
	margin: 20px;
	height: 30px;
	width: 60px;
	border: 1px solid #88a;
	border-radius: 3px;
	float: left;
	position: relative;
}

.paragraphPlan {
	margin: auto;
	font-weight: normal;
	font-size: 12px;
	font-weight: normal;
}

.tightParagraphPlan {
	margin: auto;
	font-weight: normal;
	font-size: 11px;
	font-weight: normal;
}

.select {
	margin: 10px;
	background-color: #DDDDDD;
	overflow: hidden;
}

.tightSelect {
	margin: 4px;
	background-color: #DDDDDD;
	overflow: hidden;
}

.tightSelect button {
	position: relative;
	float: right;
	cursor: pointer;
}

.select button {
	position: relative;
	margin: 5px;
	float: right;
	cursor: pointer;
}

.hide {
	display: none;
}

.visible {
	visibility: visible;
}

.tdRight {
	text-align: right;
}

.tdLeft {
	text-align: left;
}

.asterisk {
	height: 7px;
	width: 7px;
}

#newRegistration {
	color: blue;
	cursor: pointer;
}

.datepickerclassStart {
	cursor: pointer;
}
.datepickerclassEnd{
	cursor: pointer;
}
.finalmessage {
	border-radius: 4px;
	border: 4px solid #FF6622;
	height: 100px;
	width: 300px;
	color: #FF6622;
	text-align: center;
	font-style: bold;
	font-size: medium;
	padding-top: 30px;
}
</style>
</head>
<body>

	<!--  First Container -->


	<div class="mainContainer" id="firstContainer">
		<div id="headerFirstContainer" class="header">Available Plans</div>
		<div id="limitedPlanPresentation" class="content">
			Limited Coverage
			<div id="contentLimitedPlanPresentation" class="paragraphContent">
				<p>Limited Plan A provides basic medical coverage for non-U.S.
					citizens, who come to the U.S. for business, pleasure, to study, or
					ti immigrate with a maximum coverage of $120,000.</p>
			</div>

			<div class="select">
				<button id="limitedSelect">Select</button>
			</div>
		</div>
		<div id="comprehensivePresentation" class="content">
			Comprehensive Coverage
			<p>
			<div id="contentComprehensivePresentation" class="paragraphContent">
				<p>These plans offer much better and flexible coverage. Most of
					these plans work like PPO type of 80-20% plan. Means insured have
					to pay 20% of the cost for the first $5,000 per policy period
					policy pays rest 80%.</p>
			</div>
			</p>
			<div class="select">
				<button id="comprehensiveSelect">Select</button>
			</div>
		</div>
	</div>


	<!--  Second Container ::: Limited Coverage -->


	<div class="mainContainer hide" id="secondContainer">
		<div id="headerSecondContainer" class="header">Limited Coverage</div>
		<div id="limitedPlanA" class="content">
			<div id="planFrame">Plan A</div>

			<div id="contentLimitedPlanA" class="paragraphPlan">
				<p>Limited coverage plan provides the basic protection, and may
					not be adequate. It may cost you less, but the coverage is limited
					to pre defined clause of fixed amount of charges. Must read policy
					details for benefit and coverage details.</p>
			</div>
			<div class="select">
				<button id="limitedPlanASelect">Select</button>
			</div>
		</div>
		<div id="limitedPlanB" class="content">
			<div id="planFrame">Plan B</div>
			<div id="contentLimitedPlanB" class="paragraphPlan">
				<p>
					Limited Plan B provides basic medical coverage for non-U.S.
					citizens, who come to the U.S. for business, pleasure, to study, or
					to immigrate with a maximum coverage of $140,000.<br /> <br />
				</p>
			</div>
			<div class="select">
				<button id="limitedPlanBSelect">Select</button>
			</div>
		</div>
	</div>


	<!--  Third Container ::: Comprehensive  Coverage -->


	<div class="mainContainer hide" id="thirdContainer">
		<div id="headerSecondContainer" class="header">Comprehensive
			Coverage</div>
		<div id="comprehensivePlanA" class="tightContent">
			<div id="planFrame">Plan A</div>

			<div id="contentComprehensivePlanA" class="tightParagraphPlan">
				<p>Plan-A offers medical coverage and emergency services to
					individuals and families traveling outside their Home Countries.</p>
			</div>
			<div class="tightSelect">
				<button id="comprehensivePlanASelect">Select</button>
			</div>
		</div>
		<div id="comprehensivePlanB" class="tightContent">
			<div id="planFrame">Plan B</div>
			<div id="contentComprehensivePlanB" class="tightParagraphPlan">
				<p>Plan-B offers medical coverage and emergency services to
					individuals and families traveling outside their Home Countries.
					The plan pays 75% of eligible expenses to the selected Medical
					Maximum.</p>
			</div>
			<div class="tightSelect">
				<button id="comprehensivePlanBSelect">Select</button>
			</div>
		</div>
		<div id="comprehensivePlanC" class="tightContent">
			<div id="planFrame">Plan C</div>
			<div id="contentComprehensivePlanC" class="tightParagraphPlan">
				<p>Plan-C offers medical coverage and emergency services to
					individuals and families traveling outside their Home Countries.</p>
			</div>
			<div class="tightSelect">
				<button id="comprehensivePlanCSelect">Select</button>
			</div>
		</div>
	</div>


	<!--  Registration Container  -->



	<div>
		<div id="registeredScreen" class="newColorContainer hide ">
			<div id="headerRegistration" class="headerRegistration">Personal
				Details</div>
			<div id="registerBody">
				<div class="registerContainer" id="registerContainer">
					<div id="headerInsured" class="headerInsured">
						Insured #<span class="counter">1</span>
					</div>
					<form id="registerForm" class="screen">
						<table>
							<tr>
								<td class="tdRight"><label>Name<img
										class="hide asterisk" src="images/icon_RequiredField.png"></label></td>
								<td class="tdLeft"><input class="text-input required name"
									type="text" name="uName" /></td>
							</tr>
							<tr>
								<td class="tdRight"><label>Address<img
										class="hide asterisk" src="images/icon_RequiredField.png"></label></td>
								<td class="tdLeft"><input class="text-input required"
									type="text" name="uAdress" /></td>
							</tr>
							<tr>
								<td></td>
								<td class="tdLeft"><input class="text-input" type="text"
									name="ucExtraAddress" /></td>
							</tr>
							<tr>
								<td class="tdRight"><label>Start Date<img
										class="hide asterisk" src="images/icon_RequiredField.png">
								</label></td>
								<td class="tdLeft"><input
									class="text-input datepickerclassStart required" name="startDate" type="text" /></td>
							</tr>
							<tr>
								<td class="tdRight"><label>End Date<img
										class="hide asterisk" src="images/icon_RequiredField.png"></label></td>
								<td class="tdLeft"><input
									class="text-input datepickerclassEnd required" name="endDate" type="text" /></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
			<div class="taskbar">
				<span class="screen-link"><a id="newRegistration">+ Add
						more insured</a></span>
				<button id="submitRegistration">Submit</button>
			</div>
		</div>
	</div>

</body>


<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
	// Step 1 //
	$("#limitedSelect").click(function(event) {
		event.preventDefault();
		$("#firstContainer").addClass("hide");
		$("#secondContainer").removeClass("hide");
	});
	$("#comprehensiveSelect").click(function(event) {
		event.preventDefault();
		$("#firstContainer").toggleClass("hide");
		$("#thirdContainer").removeClass("hide");
	});
	$("#limitedPlanASelect").click(function(event) {
		event.preventDefault();
		$("#secondContainer").addClass("hide");
		$("#registeredScreen").removeClass("hide");
	});
	$("#limitedPlanBSelect").click(function(event) {
		event.preventDefault();
		$("#secondContainer").addClass("hide");
		$("#registeredScreen").removeClass("hide");
	});
	$(".tightSelect").click(function(event) {
		event.preventDefault();
		$("#thirdContainer").addClass("hide");
		$("#registeredScreen").removeClass("hide");
	});

	$(".datepickerclassStart").datepicker({
		showOn : "button",
		buttonImage : "images/calendar.jpg",
		buttonImageOnly : true
	});

	$(".datepickerclassEnd").datepicker({
		showOn : "button",
		buttonImage : "images/calendar.jpg",
		buttonImageOnly : true
	});
	var insuredCounter = 1;

	// Add new Insured Form

	$('#newRegistration').click(
			function(event) {
				event.preventDefault();
				insuredCounter++;

				// Create a new Form Container
				var clonedContainer = $('#registerContainer').clone().attr(
						"id", "registerContainer" + insuredCounter);
				
				// Clear data fields but StartDate or EndDate
                $("tr", clonedContainer).each(function() {
                        $('input[name!="startDate"][name!="endDate"]', this).val('');
                });

				// Append to parent
				clonedContainer.appendTo('#registerBody');

				// Add registered number to the Header
				$("#registerContainer" + insuredCounter + " span").text(
						insuredCounter);
			});

	// Validation of fields and creation of final message upon submit

	$("#submitRegistration").click(
			function(event) {
				event.preventDefault();
				var validationError = false;
				$("#registerBody tr").each(function() {
					var value = $(".required", this).val();
					if (value === "") {
						$("img", this).removeClass("hide");
						validationError = true;
					} else {
						$(".asterisk", this).addClass("hide");
					}
				});
				var nameRegistered = '';
				var counter = 0;

				// Final message

				if (validationError == false) {
					$("#registerBody .name").each(
							function() {
								if (counter == 0) {
									nameRegistered = $(this).val();
									counter++;
								} else {
									nameRegistered = nameRegistered + ' and '
											+ $(this).val();
									counter++;
								}
							});
					$("body").html(
							'<p class="finalmessage"> Thankyou for using our services '
									+ nameRegistered + '</p>');
				}
			});
</script>

</html>